Skip to content

Fix schematic trace hover highlighting (#1130)#147

Open
FizaSiddique123 wants to merge 2 commits intotscircuit:mainfrom
FizaSiddique123:fix-schematic-trace-hover-1130
Open

Fix schematic trace hover highlighting (#1130)#147
FizaSiddique123 wants to merge 2 commits intotscircuit:mainfrom
FizaSiddique123:fix-schematic-trace-hover-1130

Conversation

@FizaSiddique123
Copy link

@FizaSiddique123 FizaSiddique123 commented Dec 7, 2025

Fixes #1130

Problem

Schematic traces did not expose a stable identifier to connect them to a net, so hover highlighting could not reliably determine which trace/net to highlight.

Changes

  • Parse the generated SVG and assign data-net-id to each trace path based on:
    • existing data-schematic-trace-id / data-schematic-object-id
    • traceIdToNetId map when net information is available
  • Add hover mouseenter / mouseleave handlers on [data-net-id] elements to track the currently hovered net
  • Apply a .trace-hover CSS class to all traces that share the same data-net-id

Testing

  • bun start in schematic-viewer/
  • Open the Cosmos fixture (example7 or similar)
  • Hover traces and verify:
    • The hovered trace becomes blue
    • All segments with the same data-net-id highlight together
    • Highlight is removed when the cursor leaves the net

@vercel
Copy link

vercel bot commented Dec 7, 2025

@FizaSiddique123 is attempting to deploy a commit to the tscircuit Team on Vercel.

A member of the Team first needs to authorize it.

@FizaSiddique123
Copy link
Author

FizaSiddique123 commented Dec 7, 2025

I’ve verified the fix with bun start in schematic-viewer and tested the Cosmos fixture (example7). Hovering traces now highlights the correct net consistently.

Please let me know if you’d like any changes

@FizaSiddique123
Copy link
Author

FizaSiddique123 commented Dec 7, 2025

Hi! I have created PR #147 for this issue.
The hover highlighting is now fixed.
I would like to claim the bounty for #1130.
Please let me know if you need anything else from my side.

techmannih
techmannih requested changes Dec 7, 2025
View reviewed changes
Copy link
Member

@techmannih techmannih left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add before and after screenshot/video

@FizaSiddique123
Copy link
Author

FizaSiddique123 commented Dec 7, 2025

As requested, here are the before and after screenshots:

Before (on main):
Hovering the trace does not correctly highlight the intended net.

before-hover

After (this PR branch):
Hovering a trace now applies .trace-hover and highlights the correct net via data-net-id.

after-hover-2 after-hover-1

Please let me know if you’d like any further changes .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@techmannih techmannih Awaiting requested review from techmannih

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@FizaSiddique123 @techmannih